<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框</title>
		<style>
		/* 选择器   抓取页面元素添加效果【添加一个样式】   元素选择器 */
		div{
		/* 边框复合属性   生成一个像素实现橙色的的边框*/
		    border: 1px solid #ffaa00;
			width:500px;
			height:500px;
		}
		.d3{
			border: 20px solid #fee;
		}
		/* 需求：第二个div边框颜色改成黑色 */
		/* id选择器  html元素前标记 加id=“别名”
		 css中 #别名 抓到要素
		 class选择器   html元素前加标记 加class"别名1 别名2"
		 css中，别名 抓元素
		 */
		 #d2{
			 border: 10px solid #000;
			 backgr ound-color: #000;
			 /* 子属性 border-style 边框样式属性*/
			 border-style: dotted;
			 /* 虚线 双实线*/
			 border-style: dashed;
			 border-style: double;
			 /* 子属性：border-color 边框颜色属性*/
			 border-color: #ffaa00;
		 }
		 .d5{
			 /* barder 边框属性【复合属性】  width style color*/
			 border: 20px solid #f00;
			 /* 子属性 border-width 边框的宽度属性*/
			 /* 需求： 第三个div 40像素 */
			 border-width: 40px;
			 /* 需求：上边框宽20 点线形式 */
			 border-top: 20px dotted #f00;
			 /* 上边框加颜色*/
			 border-top-color: #ff0;
			 /* 下边框宽度调整为1px*/
			 border-bottom-width: 1px;
			 /* 左边框双实线*/
			 border-left-style: double;
			 /* 右边框 5px 虚线 绿色*/
			 border-right: 5px dashed #408840;
			 
		 }
		 /* border-rodius 边框倒三角属性：边框或者背景颜色
		 画圈 宽度与倒角一致
		 border-rodius属性值：   1个值  代表  上   右   下    左  【顺时针】
		                        2个值   代表  上   下  |  右   左
								3个值   代表  上|右  左|下
								4个值    代表  上|右|下|左
								练习  画圈   4个颜色
								*/
							
		.d4{
			border: 8px solid #f00;
			border-radius: 0px 200px 300px;}
			
		.d5{
		border:8px solid #fee;
		border-top-color: #ff0 ;
		border-right-color: #e21866;
		border-bottom-color: #35dc49;
		border-left-color: #55aaff;
		border-radius: 500px;
		transition: transform .1s;
		}
		.d4:hover{
			transform: rotate(180deg);
		}
		</style>
	</head>
	<body>
		<!-- 有宽没高的空间  css边框的使用
		-->
		<div></div>
		<div id="d2"></div>
		<div class= "d4 d5"></div>
	</body>
</html>